<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台 - 配置管理系统</title>
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .stat-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            padding: 25px;
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--accent-color);
        }
        
        .stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 300;
            margin-bottom: 5px;
        }
        
        .stat-change {
            font-size: 11px;
            color: var(--success-color);
        }
        
        .activity-list {
            list-style: none;
        }
        
        .activity-item {
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-icon {
            width: 40px;
            height: 40px;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-title {
            font-size: 13px;
            margin-bottom: 3px;
        }
        
        .activity-time {
            font-size: 11px;
            color: var(--text-secondary);
        }
        
        .config-info {
            display: grid;
            gap: 15px;
        }
        
        .config-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .config-item:last-child {
            border-bottom: none;
        }
        
        .config-label {
            font-size: 11px;
            color: var(--text-secondary);
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        .config-value {
            font-size: 13px;
            font-family: 'Courier New', monospace;
            color: var(--text-primary);
            word-break: break-all;
            text-align: right;
            max-width: 60%;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <div class="logo-icon">CM</div>
                    <div class="logo-text">
                        <h1>Config Manager</h1>
                        <p>v2.0</p>
                    </div>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title">主菜单</div>
                    <a href="dashboard.html" class="nav-item active">
                        <span class="nav-icon">■</span>
                        <span>控制台</span>
                    </a>
                    <a href="urls.html" class="nav-item">
                        <span class="nav-icon">🌐</span>
                        <span>域名池管理</span>
                    </a>
                    <a href="users.html" class="nav-item">
                        <span class="nav-icon">👤</span>
                        <span>用户管理</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">系统</div>
                    <a href="#" class="nav-item" onclick="logout(); return false;">
                        <span class="nav-icon">⎋</span>
                        <span>退出登录</span>
                    </a>
                </div>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">A</div>
                    <div class="user-details">
                        <h4 id="userName">Admin</h4>
                        <p id="userRole">管理员</p>
                    </div>
                </div>
            </div>
        </aside>
        
        <!-- 主内容 -->
        <main class="main-content">
            <div class="topbar">
                <div class="topbar-left">
                    <h2>Dashboard</h2>
                </div>
                <div class="topbar-right">
                    <button class="btn-icon" onclick="location.reload()" title="刷新">
                        ⟳
                    </button>
                </div>
            </div>
            
            <div class="content-area">
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-label">域名总数</div>
                        <div class="stat-value" id="totalUrls">-</div>
                        <div class="stat-change">URL 总数</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-label">启用域名</div>
                        <div class="stat-value" id="activeUrls">-</div>
                        <div class="stat-change">当前启用</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-label">轮询策略</div>
                        <div class="stat-value" style="font-size: 16px;" id="currentStrategy">-</div>
                        <div class="stat-change" id="lbStatus">负载均衡</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-label">总访问量</div>
                        <div class="stat-value" id="totalAccess">-</div>
                        <div class="stat-change">累计访问</div>
                    </div>
                </div>
                
                <!-- 内容区域 -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
                    <!-- 域名池状态 -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">域名池状态</h3>
                            <a href="urls.html" class="btn btn-primary" style="padding: 8px 16px;">管理域名</a>
                        </div>
                        <div class="card-body">
                            <div class="config-info" id="urlsInfo">
                                <div class="config-item">
                                    <span class="config-label">加载中...</span>
                                    <span class="config-value"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近活动 -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">系统信息</h3>
                        </div>
                        <div class="card-body">
                            <ul class="activity-list">
                                <li class="activity-item">
                                    <div class="activity-icon">✓</div>
                                    <div class="activity-content">
                                        <div class="activity-title">系统运行正常</div>
                                        <div class="activity-time">所有服务正常运行</div>
                                    </div>
                                </li>
                                <li class="activity-item">
                                    <div class="activity-icon">⚙</div>
                                    <div class="activity-content">
                                        <div class="activity-title">配置管理系统 v2.0</div>
                                        <div class="activity-time">支持用户认证和权限管理</div>
                                    </div>
                                </li>
                                <li class="activity-item">
                                    <div class="activity-icon">🔒</div>
                                    <div class="activity-content">
                                        <div class="activity-title">安全连接</div>
                                        <div class="activity-time">JWT 令牌认证</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <script src="assets/common.js"></script>
    <script>
        // 加载负载均衡配置
        async function loadLoadBalancing() {
            try {
                const data = await apiRequest('/api/admin/load-balancing');
                if (data && data.errcode === 0) {
                    const config = data.data;
                    const urls = config.urls || [];

                    // 计算统计数据
                    const totalUrls = urls.length;
                    const activeUrls = urls.filter(u => u.enabled).length;
                    const totalAccess = urls.reduce((sum, u) => sum + (u.accessCount || 0), 0);

                    // 更新统计卡片
                    document.getElementById('totalUrls').textContent = totalUrls;
                    document.getElementById('activeUrls').textContent = activeUrls;
                    document.getElementById('currentStrategy').textContent = config.strategy || 'round-robin';
                    document.getElementById('lbStatus').textContent = config.enabled ? '已启用' : '已禁用';
                    document.getElementById('totalAccess').textContent = totalAccess;

                    // 更新域名池信息
                    const urlsInfo = document.getElementById('urlsInfo');
                    if (urls.length === 0) {
                        urlsInfo.innerHTML = `
                            <div class="config-item">
                                <span class="config-label">暂无域名</span>
                                <span class="config-value">请添加 URL</span>
                            </div>
                        `;
                    } else {
                        urlsInfo.innerHTML = urls.map(url => `
                            <div class="config-item">
                                <span class="config-label">${url.name}</span>
                                <span class="config-value" style="font-size: 12px; font-family: 'Courier New', monospace;">
                                    ${url.url}
                                    <span style="color: ${url.enabled ? '#00ff00' : '#ff4444'}; margin-left: 10px;">
                                        ${url.enabled ? '●' : '○'}
                                    </span>
                                </span>
                            </div>
                        `).join('');
                    }
                }
            } catch (error) {
                console.error('加载负载均衡配置失败:', error);
            }
        }

        // 页面加载时执行
        window.addEventListener('load', () => {
            loadLoadBalancing();
        });
    </script>
</body>
</html>

